<template>
  <div>
    <video ref="videoPlayer" width="640" height="360" controls></video>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import flvjs from 'flv.js';

export default {
  setup() {
    const videoPlayer = ref(null);
    const flvPlayer = ref(null);
    const videoUrl = 'ws://192.168.31.100:9080/ws.flv?token=6d1d37bb-e370-ba83-4ced-fb85444a1887&channel=0';

    const initPlayer = () => {
      if (flvjs.isSupported()) {
        flvPlayer.value = flvjs.createPlayer({
          type: 'flv',
          url: videoUrl
        });
        flvPlayer.value.attachMediaElement(videoPlayer.value);
        flvPlayer.value.load();
        flvPlayer.value.play();
      } else {
        console.error('FLV.js is not supported in this browser.');
      }
    };

    onMounted(() => {
      initPlayer();
    });

    onBeforeUnmount(() => {
      if (flvPlayer.value) {
        flvPlayer.value.destroy();
      }
    });

    return {
      videoPlayer
    };
  }
};
</script>

<style scoped>
video {
  display: block;
  margin: 0 auto;
}
</style>
